<template>
  <div class="my">
    <div class="head">
      <img src="../assets/img/微信图片_20240925211908.jpg">
      <span>用户小新</span>
      <span><img src="../assets/img/铅笔_pencil.png"></span>
      <p>爱听书的小新...</p>
      <SetView></SetView>
    </div>
    <div class="share">
      <van-cell title="点击分享" @click="showShare = true" />
      <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    </div>
    <History></History>
  </div>
</template>
<script>
import { Toast } from 'vant';
import History from '@/components/History.vue';
import SetView from '@/components/SetView.vue';
import { Dialog } from 'vant';
export default {
  data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },

  // 访问这个组件之前的钩子函数
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    // 获取token
    let token = localStorage.getItem("AUTO_TOKEN");
    // 判断是有值
    if (token) {
      next(true);
    }
    else {
      Dialog.confirm({
        title: '您还没登录',
        message: '要跳转到登录页面吗?',
      })
        .then(() => {
          // on confirm （确定）
          next({ path: '/login' })
        })
        .catch(() => {
          // on cancel （取消）
          next(false);
        });
    }
  },
  components: {
    History,
    SetView,
  },
}
</script>
<style lang="less" scoped>
@import '../assets/css/varible.less';
@import '../assets/css/reset.css';
.my {
  position: relative;
  .share{
    border: 3px solid @bgColor;
    border-radius: 5px;
    width: 95px;
    position: absolute;
    top: 132px;
    right: 3px;
    
  }
  .head {
    position: relative;
    width: 100%;
    height: 130px;
    background-color: rgba(246, 169, 124, 0.878);

    span {
      img {
        width: 25px;
        height: 15px;
        border: 0;
        padding-top: 30px;
        left: 5px;
      }
    }

    img {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 3px solid #FA6205;
      border-radius: 50%;
      top: 15px;
      left: 20px;
    }

    span {
      position: absolute;
      font-size: 30px;
      font-weight: bold;
      font-family: a;
      top: 40px;
      left: 135px;
    }


    p {
      position: absolute;
      font-size: 15px;
      font-family: a;
      top: 85px;
      left: 165px;
    }
  }

}
</style>
